<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'


import homeIcon from '@/assets/tabbar/home.png'
import orderIcon from '@/assets/tabbar/order.png'
import discoverIcon from '@/assets/tabbar/discover.png'
import profileIcon from '@/assets/tabbar/profile.png'

const router = useRouter()
const route = useRoute()

const tabs = [
  {
    name: '首页',
    path: '/',
    icon: homeIcon
  },
  {
    name: '订单',
    path: '/orders',
    icon: orderIcon
  },
  {
    name: '发现',
    path: '/discover',
    icon: discoverIcon
  },
  {
    name: '我的',
    path: '/profile',
    icon: profileIcon
  }
]

const activeTab = ref(route.path)

const handleTabClick = (path: string) => {
  activeTab.value = path
  router.push(path)
}
</script>

<template>
  <nav class="fixed bottom-0 left-0 right-0 h-15 bg-white shadow-lg flex justify-around items-center z-1000">
    <div v-for="tab in tabs" :key="tab.path"
         class="flex flex-col items-center justify-center text-gray-400 text-xs py-2 w-1/4 transition-all duration-300 cursor-pointer hover:text-blue-500"
         :class="{ 'text-blue-500': activeTab === tab.path }"
         @click="handleTabClick(tab.path)">
      <img :src="tab.icon" :alt="tab.name"
           class="w-6 h-6 mb-1 object-contain transition-all duration-300"
           :class="{ 'grayscale-0 opacity-100': activeTab === tab.path, 'grayscale opacity-70': activeTab !== tab.path }" />
      <span>{{ tab.name }}</span>
    </div>
  </nav>
</template>
